<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="btn">get data</button>

    <script>
        // let btn = document.querySelector('.btn');
        // btn.addEventListener('click', () => {
        //     fetch('https://mock.mengxuegu.com/mock/6863523233517567f26be02d/example/musicData', {
        //         method: 'GET',
        //     })
        //         .then(res => {
        //             if (!res.ok) {
        //                 throw new Error(`HTTP error! status: ${res.status}`);
        //             }
        //             return res.json();
        //         })
        //         .then(data => {
        //             console.log(data); // 这里可以正确获取解析后的数据
        //         })
        //         .catch(error => {
        //             console.error('Fetch error:', error);
        //         });
        // });
        let btn = document.querySelector('.btn')
        btn.addEventListener('click', () => {
            fetch('https://mock.mengxuegu.com/mock/6863523233517567f26be02d/example/musicData',
                {
                    method: 'GET',
                }
            ).then(res => {
                return res.json()
            }).then(data => {
                console.log(data);
            })
        })
    </script>
</body>

</html>

<!-- <script>
    let btn = document.querySelector('.btn')
    btn.addEventListener('click', () => {
        fetch('https://mock.mengxuegu.com/mock/6863523233517567f26be02d/example/musicData',
            {
                method: 'GET',
            }.then(res => {
                console.log(data);
                return res.json()
            })
        )
    })
</script> -->